<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/15
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>影视分析平台</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/movie_css.css">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<%--vue包裹--%>
<div id="app1">


    <%--导航栏--%>
    <nav class="main_daohanglan navbar navbar-expand-sm fixed-top navbar-light">


        <!-- Brand/logo -->
        <a class="" href="#">
            <img class="main_touxiang rounded" :src="user.uImg" alt="logo" style="width:60px;">
        </a>
        <h4 class="active">&nbsp;&nbsp;{{user.uName}}</h4>
        <!-- Links -->
        <ul class="navbar-nav ml-auto">

            <li class="nav-item ">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item" @click="toCart">
                <a class="nav-link" href="#">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                             class="bi bi-basket2" viewBox="0 0 16 16">
                            <path d="M4 10a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0v-2zm3 0a1 1 0 1 1 2 0v2a1 1 0 0 1-2 0v-2z"/>
                            <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-.623l-1.844 6.456a.75.75 0 0 1-.722.544H3.69a.75.75 0 0 1-.722-.544L1.123 8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6h1.717L5.07 1.243a.5.5 0 0 1 .686-.172zM2.163 8l1.714 6h8.246l1.714-6H2.163z"/>
                        </svg>
                    </div>
                </a>
            </li>
        </ul>

    </nav>
    <%--    导航栏结束--%>


    <%--        下部内容--%>
    <div class="container-fluid main">
        <div class="row">
            <%--            左侧副导航栏--%>
            <div class="col-md-2 sidebar">
                <div class="container">
                    <div class="row" style="padding-top: 10%">
                        <div class="col-lg-12 text-center">
                            <svg xmlns="http://www.w3.org/2000/svg" style="color: #4FC3F7;margin-bottom: 20px"
                                 width="56" height="56" fill="currentColor" class="bi bi-clipboard-data"
                                 viewBox="0 0 16 16">
                                <path d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z"/>
                                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                            </svg>
                        </div>
                    </div>
                    <hr>
                    <div class="row" style="margin-top: 50px;margin-left: 18%">

                        <ul class="list-group list-group-flush" style="position: relative">
                            <li class="list-group-item  chuizhi_li" @click="toMe">我的主页
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-person-circle" viewBox="0 0 16 16">
                                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                        <path fill-rule="evenodd"
                                              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li">我的好友 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-emoji-sunglasses" viewBox="0 0 16 16">
                                        <path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z"/>
                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" style="border-bottom: 3px solid #4FC3F7;">商品购物
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-bag" viewBox="0 0 16 16">
                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item mt-4 chuizhi_li" @click="toMovieAn">商品分析 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <div style="position: absolute;right: 1px;top: 30%">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                                         class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                              d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
                                    </svg>
                                </div>
                            </li>
                            <li class="list-group-item">
                            </li>

                        </ul>


                    </div>

                </div>
            </div>
            <%--                左侧副导航栏结束--%>


            <%--    右侧内容区--%>
            <div class="col-md-10 content float-right">


                <div class="container">


                    <%--                        商品展示区movie--%>
                    <div v-if="whichShop==1">


                        <%--商品选择区--%>
                        <div class="row  mt-2">

                            <%--图书选择--%>
                            <div class="shopSel card col-lg-4 text-center" @click="toFindBook">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-book-half" viewBox="0 0 16 16">
                                        <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                    </svg>
                                </div>


                            </div>

                            <%--电影选择--%>
                            <div class="shopSelActive shopSel card col-lg-4 ">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-camera-reels" viewBox="0 0 16 16">
                                        <path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z"/>
                                        <path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
                                        <path d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                                    </svg>
                                </div>

                            </div>

                            <%--鞋类选择--%>
                            <div class="shopSel card col-lg-4 text-center" @click="toFindShoes">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-archive" viewBox="0 0 16 16">
                                        <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                                    </svg>
                                </div>

                            </div>


                        </div>
                        <%--                        商品选择区结束--%>


                        <%--                      轮播图开始  --%>
                        <div class="card mt-2" style="border: 2px solid #dfdbd8;border-radius: 5px;">
                            <div id="demo" class="carousel slide" data-ride="carousel">

                                <!-- 指示符 -->
                                <ul class="carousel-indicators">
                                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                                    <li data-target="#demo" data-slide-to="1"></li>
                                    <li data-target="#demo" data-slide-to="2"></li>
                                </ul>

                                <!-- 轮播图片 -->
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img style="width:1109px;height:500px" src="img/qingchunyijiu.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/chaunqi.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/gansidui.jpg">
                                    </div>
                                </div>

                                <!-- 左右切换按钮 -->
                                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </a>
                                <a class="carousel-control-next" href="#demo" data-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </a>

                            </div>

                        </div>
                        <%--                        轮播图结束--%>


                        <%--电影--%>
                        <div class="card mt-2 ">


                            <div class="row mb-2" v-for="n in widthMovie">

                                <div class="col-lg-3 " v-for="(movie,i) in movies.slice((n-1)*4,(n-1)*4+4)">

                                    <div class="card moviecard" @click="toMovieInfo(movie)">
                                        <div style="margin: 0 auto"><img class="card-img-top rounded"
                                                                         style="width: 240px;height: 300px"
                                                                         :src="imgSrc(movie.mid)" alt="Card image cap">
                                        </div>
                                        <div style="margin: 0 auto"><h5 class="card-title">{{movie.mname}}</h5></div>
                                        <div class="card-body overflow-auto rounded"
                                             style="height: 150px;border: 1px solid #f2f5fa;border-radius: 3px">

                                            <p class="card-text">导演：{{movie.mdirector}}</p>
                                            <p class="card-text">语种：{{movie.mlanguage}}</p>
                                            <p class="card-text">语种：{{movie.mcountry}}</p>


                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <%--                    电影结束--%>


                    </div>
                    <%--                        商品展示区movie结束--%>


                    <%--                        商品展示区shoe--%>
                    <div v-if="whichShop==2">


                        <%--商品选择区--%>
                        <div class="row  mt-2">


                            <div class=" shopSel card col-lg-4 text-center" @click="toFindBook">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-book-half" viewBox="0 0 16 16">
                                        <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                    </svg>
                                </div>


                            </div>


                            <div class=" shopSel card col-lg-4 " @click="toFindMovie">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-camera-reels" viewBox="0 0 16 16">
                                        <path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z"/>
                                        <path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
                                        <path d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                                    </svg>
                                </div>

                            </div>


                            <div class="shopSelActive shopSel card col-lg-4 text-center">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-archive" viewBox="0 0 16 16">
                                        <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                                    </svg>
                                </div>

                            </div>


                        </div>
                        <%--                        商品选择区结束--%>


                        <%--                      轮播图开始  --%>
                        <div class="card mt-2" style="border: 2px solid #dfdbd8;border-radius: 5px;">
                            <div id="demo1" class="carousel slide" data-ride="carousel">

                                <!-- 指示符 -->
                                <ul class="carousel-indicators">
                                    <li data-target="#demo1" data-slide-to="0" class="active"></li>
                                    <li data-target="#demo1" data-slide-to="1"></li>
                                    <li data-target="#demo1" data-slide-to="2"></li>
                                </ul>

                                <!-- 轮播图片 -->
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img style="width:1109px;height:500px" src="img/qingchunyijiu.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/chaunqi.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/gansidui.jpg">
                                    </div>
                                </div>

                                <!-- 左右切换按钮 -->
                                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </a>
                                <a class="carousel-control-next" href="#demo" data-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </a>

                            </div>

                        </div>
                        <%--                        轮播图结束--%>


                        <%--shoe--%>
                        <div class="card mt-2 ">


                            <div class="row mb-2" v-for="n in widthShoe">

                                <div class="col-lg-3 " v-for="(shoe,i) in shoes.slice((n-1)*4,(n-1)*4+4)">

                                    <div class="card moviecard" @click="toShoeInfo(shoe)">
                                        <div style="margin: 0 auto"><img class="card-img-top rounded"
                                                                         style="width: 240px;height: 300px"
                                                                         :src="imgSrcs(shoe.sid)" alt="Card image cap">
                                        </div>
                                        <div style="margin: 0 auto"><h5 class="card-title">{{shoe.sname}}</h5></div>
                                        <div class="card-body overflow-auto rounded"
                                             style="height: 150px;border: 1px solid #f2f5fa;border-radius: 3px">

                                            <p class="card-text">品牌：{{shoe.sbrand}}</p>

                                            <p class="card-text">评分：{{shoe.sgrade}}</p>


                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <p class="text-danger" style="font-size: 30px">{{shoe.sprice}}￥</p>
                                            </div>
                                            <div style="margin-left: 50px;margin-top: 10px"><button class="btn btn-primary">购买</button></div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <%--                    电影结束--%>


                    </div>
                    <%--                        商品展示区shoe结束--%>


                    <%--                        商品展示区book--%>
                    <div v-if="whichShop==3">


                        <%--商品选择区--%>
                        <div class="row  mt-2">


                            <div class="shopSelActive shopSel card col-lg-4 text-center">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-book-half" viewBox="0 0 16 16">
                                        <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                    </svg>
                                </div>


                            </div>


                            <div class=" shopSel card col-lg-4 " @click="toFindMovie">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-camera-reels" viewBox="0 0 16 16">
                                        <path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z"/>
                                        <path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
                                        <path d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                                    </svg>
                                </div>

                            </div>


                            <div class="shopSel card col-lg-4 text-center" @click="toFindShoes">
                                <div class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                         class="bi bi-archive" viewBox="0 0 16 16">
                                        <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                                    </svg>
                                </div>

                            </div>


                        </div>
                        <%--                        商品选择区结束--%>


                        <%--                      轮播图开始  --%>
                        <div class="card mt-2" style="border: 2px solid #dfdbd8;border-radius: 5px;">
                            <div id="demo2" class="carousel slide" data-ride="carousel">

                                <!-- 指示符 -->
                                <ul class="carousel-indicators">
                                    <li data-target="#demo2" data-slide-to="0" class="active"></li>
                                    <li data-target="#demo2" data-slide-to="1"></li>
                                    <li data-target="#demo2" data-slide-to="2"></li>
                                </ul>

                                <!-- 轮播图片 -->
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img style="width:1109px;height:500px" src="img/qingchunyijiu.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/chaunqi.jpg">
                                    </div>
                                    <div class="carousel-item">
                                        <img style="width:1109px;height:500px" src="img/gansidui.jpg">
                                    </div>
                                </div>

                                <!-- 左右切换按钮 -->
                                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </a>
                                <a class="carousel-control-next" href="#demo" data-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </a>

                            </div>

                        </div>
                        <%--                        轮播图结束--%>


                        <%--book--%>
                        <div class="card mt-2 ">


                            <div class="row mb-2" v-for="n in widthBook">

                                <div class="col-lg-3 " v-for="(book,i) in books.slice((n-1)*4,(n-1)*4+4)">

                                    <div class="card moviecard" @click="toBookInfo(book)">
                                        <div style="margin: 0 auto"><img class="card-img-top rounded"
                                                                         style="width: 240px;height: 300px"
                                                                         :src="imgSrcb(book.bid)" alt="Card image cap">
                                        </div>
                                        <div style="margin: 0 auto"><h5 class="card-title">{{book.bname}}</h5></div>
                                        <div class="card-body overflow-auto rounded"
                                             style="height: 150px;border: 1px solid #f2f5fa;border-radius: 3px">

                                            作者：<p class="card-text" style="font-weight: bold">{{book.bwriter}}</p>

                                            评分：<p style="font-weight: bold" class="card-text">{{book.bgrade}} </p>


                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <p class="text-danger" style="font-size: 30px">{{book.bprice}}￥</p>
                                            </div>
                                            <div style="margin-left: 50px;margin-top: 10px"><button class="btn btn-primary">购买</button></div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
                        <%--                    电影结束--%>


                    </div>
                    <%--                        商品展示区book结束--%>


                </div>
            </div>
            <%--            右侧内容区结束--%>


        </div>


    </div>
    <%--        下部内容结束--%>

</div>
<script>
    var app = new Vue({
        el: "#app1",
        data() {
            return {
                user: JSON.parse(localStorage.getItem("user")),
                movies: JSON.parse(localStorage.getItem("movies")),
                shoes: "",
                books: "",


                whichShop: 1

            }
        },
        methods: {
            toMe() {

                window.location.href = "main.jsp"
            },
            toMovieAn() {
                window.location.href = "shopAnalysis.jsp"
            },
            imgSrc(mid) {
                return "img/" + mid + ".jpg"
            },
            imgSrcs(sid) {
                return "img/" + sid + ".jpg"
            },
            imgSrcb(bid) {
                return "img/" + bid + ".jpg"
            },
            toMovieInfo(movie) {
                a2 = JSON.stringify(movie)
                localStorage.setItem("movie", a2)
                window.location.href = "movieinfo.jsp"

            },
            toBookInfo(book) {
                localStorage.setItem("book", JSON.stringify(book))
                window.location.href = "bookinfo.jsp"
            },
            toShoeInfo(shoe) {
                localStorage.setItem("shoe", JSON.stringify(shoe))
                window.location.href = "shoeinfo.jsp"
            },
            toFindBook() {

                let that = this
                axios.post('${pageContext.request.contextPath}/book/findAllBooks').then(function (response) {

                    localStorage.setItem("books", response.data)
                    app.$data.books = JSON.parse(localStorage.getItem("books"))
                    that.whichShop = 3
                })
            },
            toFindShoes() {

                let that = this
                axios.post('${pageContext.request.contextPath}/shoes/findAllShoes').then(function (response) {
                    localStorage.setItem("shoes", response.data)
                    app.$data.shoes = JSON.parse(localStorage.getItem("shoes"))
                    that.whichShop = 2
                })
            },
            toFindMovie() {
                let that = this
                alert("daodainy")

                axios.post('${pageContext.request.contextPath}/movie/findAllMovies').then(function (response) {
                    localStorage.setItem("movies", response.data)
                    that.whichShop = 1
                })
            },
            toCart(){
                axios.post("${pageContext.request.contextPath}/cart/findAllShops").then(function (response) {
                    if (response.data=="1"){
                        window.location.href="basket.jsp"
                    }else {
                        alert("chabudao")
                    }
                })
            }


        },

        computed: {
            widthMovie: function () {
                return Math.ceil(this.movies.length / 4)
            },
            widthBook: function () {
                return Math.ceil(this.books.length / 4)
            },
            widthShoe: function () {
                return Math.ceil(this.shoes.length / 4)
            },


        }

    })
</script>


<%--vue包裹结束--%>


</body>
</html>
